<template>
  <el-row>
    <el-col :span="24">
      <el-menu mode="horizontal" router :background-color="'#e3b28d'" :text-color="'#fff'" :active-text-color="'#ffd04b'">
        <el-menu-item index="/" @click="handleClick">
          <i class="el-icon-s-home"></i>
          首页
        </el-menu-item>
        <el-menu-item index="/restaurant/:id" @click="handleClick">
          <i class="el-icon-s-order"></i>
          餐厅
        </el-menu-item>
        <el-menu-item index="/user/profile" @click="handleClick">
          <i class="el-icon-s-custom"></i>
          用户信息
        </el-menu-item>
      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'Navbar',
  methods: {
    handleClick() {
      // 可以在这里添加点击事件的处理逻辑
    }
  }
};
</script>

<style scoped>
.el-menu {
  background-color: #e3b28d;
  color: #fff;
  padding: 0; /* 减少内边距 */
  margin: 0; /* 减少外边距 */
}

.el-menu-item {
  color: #fff;
  padding: 10px 20px; /* 减少内边距 */
}

.el-menu-item:hover {
  background-color: #e3b28d;
}

.el-menu-item.is-active {
  background-color: #e3b28d;
}
</style>